<template>
    <div class="right-bg">
        <div class="item-center">
            <div class="weather-value">
                <!-- <div class="weather-status">{{weatherInfo.weather}}</div>
                <div>{{weatherInfo.tempRange}}</div> -->
            </div>
            <div class="weath-wrapper">
                <div v-for="(item,index) in weatherList" :key="index" class="weather-row">
                    <div class="row-item">
                        <!-- <div>
                            <span class="yellow">80</span>
                            <span> - </span>
                            <span class="warning">110</span>
                        </div>
                        <div>
                            <span>良</span>
                            <span> - </span>
                            <span>轻度</span>
                        </div> -->

                        <div  class="yellow">
                            {{item.pollutionIndex}}
                        </div>
                        <div>
                            {{item.pollutionState}}
                        </div>
                    </div>
                    <div class="row-item">
                        <div>{{item.time}}</div>
                        <img src="../../assets/dp1/pm-icon.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="sj-tat">
            <div class="relative">
                <div class="bjl-item">
                    <div>
                        <span id="sjbjl" class="percent-num"></span>
                        <span class="yellow">%</span>
                    </div>
                    <div class="bjl-text">事件办结率</div>
                </div>
                <div class="zb-stat">
                    <div class="glx-text">
                        各来源占比
                    </div>
                    <div class="ly-legend">
                        <div v-for="(item,index) in lyzbList" :key="index" class="flex">
                            <div v-for="(sItem,sIndex) in item" :key="sIndex">
                                <span class="ly-legend-label" :class="`color${sIndex+1}`"></span>
                                <span>{{sItem.name}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="stat7" class="">

                </div>

                <img src="../../assets/dp1/right-sjbjl.png" alt="">

            </div>
            <div class="lxtj-row">
                <div class="relative">
                    <div class="lxtj-row-title light-text">事件类型统计</div>
                    <img src="../../assets/dp1/right-sjlxtj-title.png" alt="">
                </div>
                <div class="lxtj-stat-wrapper">
                    <div v-for="(item,index) in tjList" :key="index" class="lxtj-stat-row">
                        <div :id="'lxtj'+index" class="stat6 lxtj-stat-inner-wrapper">

                        </div>
                        <div class="lxtj-stat-inner-wrapper lxtj-stat-num">
                            <span class="num">{{item.num}}</span>
                            <span>件</span>
                        </div>
                        <img src="../../assets/dp1/right-sjlxtj.png" alt="">
                        <div class="lxtj-text">{{item.name}}</div>
                    </div>

                </div>
            </div>
        </div>
        <div class="blqk-title-row">
            <div class="relative">
                <div class="light-text fjbl-title">事件分拣办理情况</div>
                <img src="../../assets/dp1/right-blqk-title.png" alt="">
            </div>
            <div class="bmbl-row">
                <div class="light-text bmbl-title">各部门办理情况对比分析</div>
                <img src="../../assets/dp1/right-fx.png" alt="">
            </div>
            <div class="relative">
                <div class="light-text rcfx-title">热词分析</div>
                <img class="rc-img" src="../../assets/dp1/rc-title.png" alt="">
            </div>
        </div>
        <div class="bl-stat-content">
            <div>

                <div v-for="(item,index) in sjfjList" :key="index" class="relative">
                    <div class="fjbl-row">
                        <span class="fjbl-text">{{item.name}}</span>
                        <span>{{item.num}}</span>
                    </div>
                    <img src="../../assets/dp1/right-blqk-row.png" alt="">
                </div>
            </div>
            <div id="stat8" class="bmbl-stat">

            </div>
            <div id="tagbox">
                <a v-for="(item,index) in wordsList" :key="index" :style="`color:${item.color}`">{{item.name}}</a>
            </div>

        </div>
        <div class="cg-stat">
            <div class="cg-title">
                <div class="cg-title-row1">
                    <div class="light-text ztqk-title">城管事件整体情况</div>
                </div>
                <div class="cg-title-row2">
                    <div class="light-text hbfx-title">城管事件同比环比分析</div>
                </div>
                <div class="cg-title-row3">
                    <div class="light-text sjfb-title">城管事件分布</div>
                </div>
            </div>
            <div class="flex">
                <div id="stat10">

                </div>
                <div class="hbfx-stat">
                    <div class="hbfx-stat-title">
                        <div class="title-row1">事件类型</div>
                        <div class="title-row2">同比</div>
                        <div class="title-row2">环比</div>
                        <div class="title-row2">结案率</div>
                    </div>
                    <ul>
                        <li v-for="(item,index) in hbList" :key="index" class="hbfx-stat-row">
                            <div class="title-row1">{{item.dict_data_name}}</div>
                            <div class="title-row2 stat-num" :class="[getHbClass(item.lastRatio)]">{{Math.abs(item.lastRatio)}}%{{getHbClass(item.lastRatio)=='up'?'↑':'↓'}}</div>
                            <div class="title-row2 stat-num" :class="[getHbClass(item.beforeRatio)]">{{Math.abs(item.beforeRatio)}}%{{getHbClass(item.lastRatio)=='up'?'↑':'↓'}}</div>
                            <div class="title-row2 stat-num" :class="[getHbClass(item.endRatio)]">{{Math.abs(item.endRatio)}}%{{getHbClass(item.lastRatio)=='up'?'↑':'↓'}}</div>
                        </li>
                    </ul>
                </div>
                <div id="stat11"></div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import "echarts-liquidfill";
import "echarts-wordcloud";
import cloud from "./cloudWord";
import Pubsub from "../../utils/pubsub";
import { chunkArr } from "../../utils";
import {
    option6,
    option7,
    option8,
    option9,
    option10,
    option11
} from "./statConfig";
import {
    getSjbjl,
    getLyzb,
    getSjlxtj,
    getPm,
    getSjfjList,
    getGztList,
    getHotWord,
    getCgsjList,
    getCgsjhbList,
    getCgsjfbList
} from "../../config/api";
import Odometer from "../../lib/odometer";

let colors = ["#e83c34", "#539eaa", "#eea17d", "#84cfb6", "#f06807", "#fff000"];
export default {
    props: ["weatherInfo"],
    data() {
        return {
            timer: null,
            bjRatio: 0,
            lyzbList: [], //来源占比label
            commonRequest: {
                town: "all",
                type: ""
            },
            weatherList: [
                { time: "24小时" },
                { time: "48小时" },
                { time: "72小时" }
            ],
            tjList: [
                { name: "咨询求助", num: "0" },
                { name: "意见建议", num: "0" },
                { name: "投诉举报", num: "0" },
                { name: "表彰表扬", num: "0" }
            ],
            hbList: [],
            sjfjList: [
                { name: "已受理", num: 0 },
                { name: "已分拣", num: 0 },
                { name: "已完结", num: 0 }
            ],
            wordsList: []
        };
    },
    destroyed() {
        this.cloud && this.cloud.clearTimer();
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
        this.pubsub_token2 && Pubsub.unsubscribe(this.pubsub_token2);
        this.pubsub_token3 && Pubsub.unsubscribe(this.pubsub_token3);
        this.pubsub_token4 && Pubsub.unsubscribe(this.pubsub_token4);
        this.pubsub_token5 && Pubsub.unsubscribe(this.pubsub_token5);
        this.pubsub_token6 && Pubsub.unsubscribe(this.pubsub_token6);
        this.pubsub_token7 && Pubsub.unsubscribe(this.pubsub_token7);
        this.pubsub_token8 && Pubsub.unsubscribe(this.pubsub_token8);
    },
    mounted() {
        this.initChart();
        this.initData();
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        this.sjbjlNum = new Odometer("#sjbjl", {
            num: 0
        });
        // this.wordsList.map(item => {
        //     let num = Math.floor(Math.random() * (6 + 1));
        //     item.color = colors[num];
        // });
        // this.cloud = new cloud();
        // this.cloud.setCloud();
    },
    methods: {
         /**
         * 监听ws变化后请求不同接口
         */
        setPubsub(){
            this.pubsub_token2 = Pubsub.subscribe("ALL_SCREEN_8512345_FINISH_RATE",()=>{//8512345--办结率
                this.getSjbjlData();
            });
            this.pubsub_token3 = Pubsub.subscribe("ALL_SCREEN_8512345_PROPORTION",()=>{//8512345--占比统计
                this.getLyzbData();
            });
            this.pubsub_token4 = Pubsub.subscribe("ALL_SCREEN_8512345_EVENT_TYPE",()=>{//8512345--事件类型统计
                this.getSjlxtjData();
            });
            this.pubsub_token5 = Pubsub.subscribe("ALL_SCREEN_FJZF_SORT_SITUATION",()=>{//8512345--事件分拣办理情况
                this.getSjfjListData();
            });
            this.pubsub_token6 = Pubsub.subscribe("ALL_SCREEN_ALL_SITUATION",()=>{//8512345--事件分拣办理情况
                this.getCgsjListData();
            });
            this.pubsub_token7 = Pubsub.subscribe("ALL_SCREEN_CYCLIC_RATIO",()=>{//8512345--事件分拣办理情况
                this.getCgsjhbListData();
            });
            this.pubsub_token8 = Pubsub.subscribe("ALL_SCREEN_EVENT_DISTRIBUTION",()=>{//8512345--事件分拣办理情况
                this.getCgsjfbList();
            });

          
        },
        /**
         * 调用接口方法
         */
        initData() {
            this.getSjbjlData();
            this.getLyzbData();
            this.getSjlxtjData(); //pb
            this.getPmData();
            this.getSjfjListData();
            this.getGztListData();
            this.getHotWordData(); //pb
            this.getCgsjListData();
            this.getCgsjhbListData();
            this.getCgsjfbListData();
        },
        initChart() {
            this.myChart7 = echarts.init(document.getElementById("stat7"));
            this.myChart8 = echarts.init(document.getElementById("stat8"));
            // this.myChart9 = echarts.init(document.getElementById("stat9"));
            this.myChart10 = echarts.init(document.getElementById("stat10"));
            this.myChart11 = echarts.init(document.getElementById("stat11"));
            this.myChart7.setOption(option7);
            this.myChart8.setOption(option8);
            // this.myChart9.setOption(option9);
            this.myChart10.setOption(option10);
            this.myChart11.setOption(option11);
        },
        /**
         * 事件办结率
         */
        getSjbjlData() {
            getSjbjl(this.commonRequest).then((result = {}) => {
                // this.bjRatio = result.data || 0;
                this.sjbjlNum.update(result.data || 0);
            });
        },
        /**
         * 各来源占比
         */
        getLyzbData() {
            getLyzb(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                let series = [];
                this.lyzbList = chunkArr(data, 2);
                series[0] = { data };
                this.myChart7.setOption({ series });
            });
        },
        /**
         * 事件类型统计
         */
        getSjlxtjData() {
            getSjlxtj(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                let max = 0;
                data.map(item => {
                    //计算最大值
                    max += parseInt(item.count);
                });
                this.tjList.map((item, index) => {
                    data.map(sItem => {
                        if (item.name == sItem.eventType) {
                            item.num = sItem.count;
                            this[`lxtj${index}`] = echarts.init(
                                document.getElementById(`lxtj${index}`)
                            );
                            this[`lxtj${index}`].setOption(
                                option6(sItem.count, max)
                            );
                        }
                    });
                });
            });
        },
        /**
         * pm25
         */
        getPmData() {
            getPm(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                this.weatherList[0].pollutionIndex = data.pollutionIndex24;
                this.weatherList[0].pollutionState = data.pollutionState24;

                this.weatherList[1].pollutionIndex = data.pollutionIndex48;
                this.weatherList[1].pollutionState = data.pollutionState48;

                this.weatherList[2].pollutionIndex = data.pollutionIndex72;
                this.weatherList[2].pollutionState = data.pollutionState72;
            });
        },
        /**
         * 事件分拣办理情况
         */
        getSjfjListData() {
            getSjfjList(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                data.map((item, index) => {
                    this.sjfjList[index].num = item;
                });
            });
        },
        /**
         * 工作台办结情况对比
         */
        getGztListData() {
            getGztList(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                let xAxis = [{}];
                let series = [{}, {}, {}];
                xAxis[0].data = data.xAxis;
                series[0].data = data.receiveNum;
                series[1].data = data.endNum;
                series[2].data = data.avgNum;
                this.myChart8.setOption({
                    xAxis,
                    series
                });
            });
        },
        /**
         * 热词分析
         */
        getHotWordData() {
            getHotWord(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                let arr = [];
                data.map(item => {
                    let num = Math.floor(Math.random() * (6 + 1));
                    arr.push({
                        name: item,
                        color: colors[num]
                    });
                });
                this.wordsList = arr;
                setTimeout(() => {
                    this.cloud = new cloud();
                    this.cloud.setCloud();
                });
            });
        },
        /**
         * 城管事件总体情况
         */
        getCgsjListData() {
            getCgsjList(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                let { legend, series, yAxis = [] } = data;
                let y = {},
                    l = {},
                    s = [];
                l.data = legend;
                y.data = yAxis || [];
                series.map(item => {
                    s.push({
                        name: item.name,
                        type: "bar",
                        stack: "总量",
                        label: {
                            normal: {
                                show: true,
                                position: "insideRight"
                            }
                        },
                        data: item.data
                    });
                });
                this.myChart10.setOption({
                    legend: l,
                    series: s,
                    yAxis: y
                });
            });
        },
        /**
         * 城管事件同环比
         */
        getCgsjhbListData() {
            getCgsjhbList(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                this.hbList = data; 
            });
        },
        /**
         * 城管事件分布
         */
        getCgsjfbListData() {
            getCgsjfbList(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                let polar = [{}];
                let series = [{}];
                polar[0].indicator = data.indicator || [];
                series[0].data = [
                    {
                        value: data.data,
                        name: "城管事件分布"
                    }
                ];
                this.myChart11.setOption({
                    polar,
                    series
                });
            });
        },
        /**
         * 获取环比同比的class
         */
        getHbClass(num){
            return Number(num)>=0?"up":"down";
        }
    }
};
</script>

<style lang="scss" scoped>
.right-bg {
    flex: 1;
    padding-top: 33px;
    .weath-wrapper {
        flex: 1;
        display: flex;
        justify-content: space-around;
        padding: 0 65px;
    }
    .weather-value {
        font-size: 16px;
    }
    .weather-row {
        // font-size: 28px;
        display: flex;
        align-items: center;
        .row-item {
            height: 38px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            &:first-child {
                margin-right: 16px;
            }
        }
        .yellow {
            color: #fff000;
        }
        .warning {
            color: #ff6600;
        }
    }
    .sj-tat {
        display: flex;
        // align-items: center;
        margin-top: 20px;
        padding: 0 24px 0 15px;
    }
    .bjl-item {
        height: 127px;
        width: 127px;
        position: absolute;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .percent-num {
            font-size: 35px;
            color: #fff000;
            & + span {
                color: #fff000;
            }
        }
        .bjl-text {
            color: #aed2ff;
            font-size: 12px;
        }
    }
    .zb-stat {
        height: 100px;
        width: 170px;
        position: absolute;
        top: 0;
        right: 0;
    }
    .glx-text {
        line-height: 14px;
        left: 14px;
        top: 20px;
        font-size: 11px;
        color: #c8e1ff;
        width: 13px;
        position: absolute;
    }
    #stat7 {
        position: absolute;
        height: 80px;
        width: 70px;
        right: 30px;
        top: 15px;
    }
    .ly-legend {
        position: absolute;
        top: 100%;
        margin-top: 12px;
        font-size: 12px;
        color: #c8e1ff;
        & > div {
            margin-bottom: 5px;
        }
        &-label {
            height: 10px;
            width: 15px;
            border-radius: 4px;
            display: inline-block;
            margin-right: 3px;
            &.color1 {
                background: #c3e7ff;
            }
            &.color2 {
                background: #5298cc;
            }
            &.color3 {
                background: #7fc5ee;
            }
            & + span {
                margin-right: 15px;
            }
        }
    }
    .lxtj-row {
        flex: 1;
        margin-left: 35px;
        &-title {
            position: absolute;
            text-align: center;
            width: 100%;
            margin-left: -13px;
        }
    }
    .lxtj-stat-wrapper {
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        .lxtj-stat-num {
            display: flex;
            align-items: center;
            justify-content: center;

            .num {
                font-size: 22px;
                color: #fff000;
                & + span {
                    color: #c8e1ff;
                    font-size: 12px;
                }
            }
        }
    }
    .lxtj-stat-row {
        font-size: 12px;
        color: #c8e1ff;
        text-align: center;
        position: relative;
        .lxtj-stat-inner-wrapper {
            height: 88px;
            width: 88px;
            position: absolute;
            left: 4px;
            top: 9px;
        }
    }
    .lxtj-text {
        margin-top: 8px;
    }
    .blqk-title-row {
        display: flex;
        position: relative;
        padding-left: 30px;
        margin-top: 16px;
        .fjbl-title {
            position: absolute;
            left: 40px;
            top: 8px;
        }
        .bmbl-row {
            margin-left: 54px;
            position: relative;
        }
        .bmbl-title {
            position: absolute;
            left: -8px;
            top: 23px;
        }
    }
    .bl-stat-content {
        display: flex;
        padding-left: 15px;
        .fjbl-row {
            position: absolute;
            height: 50px;
            width: 228px;
            padding: 0 25px 0 40px;
            box-sizing: border-box;
            top: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .fjbl-text {
            font-size: 12px;
            color: #a9cfff;
            & + span {
                color: #fff000;
                font-size: 24px;
            }
        }
    }
    .bmbl-stat {
        height: 260px;
        width: 420px;
        margin-left: 40px;
    }
    #tagbox {
        height: 260px;
        width: 220px;
        position: relative;
        a {
            position: absolute;
            padding: 3px 6px;
            font-family: Microsoft YaHei;
            color: #fff;
            top: 0px;
            font-weight: bold;
            text-decoration: none;
            left: 0px;
        }
    }
    .cg-stat {
        height: 330px;
        width: 100%;
        background: url("../../assets/dp1/right-stat-bg2.png") no-repeat;
        background-size: 100% 100%;
    }
    .rc-img {
        position: absolute;
        top: 25px;
        right: -105px;
    }
    .rcfx-title {
        position: absolute;
        width: 58px;
        top: 10px;
        left: -22px;
    }
    .cg-title {
        display: flex;
        padding-bottom: 8px;
        height: 60px;
        align-items: flex-end;
        box-sizing: border-box;
    }
    .cg-title-row1 {
        width: 400px;
        position: relative;
        padding-left: 180px;
        box-sizing: border-box;
    }
    .cg-title-row2 {
        width: 250px;
        padding-left: 61px;
        margin-bottom: 5px;
    }
    .cg-title-row3 {
        margin-left: 80px;
    }
    #stat10 {
        height: 236px;
        width: 400px;
        padding-left: 30px;
        box-sizing: border-box;
    }
    .hbfx-stat {
        width: 300px;
        height: 236px;
        &-title {
            display: flex;
            padding: 5px 0 10px 0;
            text-align: center;
            font-size: 12px;
            color: #a7c7ff;
        }
        .title-row1 {
            flex: 1;
        }
        .title-row2 {
            width: 70px;
            text-align: center;
        }
    }
    #stat11 {
        height: 236px;
        width: 220px;
    }
    .hbfx-stat-row {
        line-height: 32px;
        height: 32px;
        display: flex;
        &:nth-child(even) {
            background: rgba(0, 76, 255, 0.2);
        }
        &:nth-child(odd) {
            background: rgba(0, 76, 255, 0.06);
        }
        .stat-num {
            box-sizing: border-box;
            padding-left: 5px;
        }
        .up {
            color: #ff0000;
        }
        .down {
            color: #00f17f;
        }
    }
}
.weather-status {
    text-align: center;
}
</style>